<!-- 添加账号弹窗 HTML -->
<div id="addAccountModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold text-gray-800">添加公众号账号</h2>
            <button id="closeAddAccountModalBtn" class="text-gray-500 hover:text-gray-700 focus:outline-none">
                <i class="fa fa-times text-xl"></i>
            </button>
        </div>
        <form id="addAccountForm" class="space-y-5">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label for="accountName" class="block text-sm font-medium text-gray-700 mb-1">账号名称 <span class="text-red-500">*</span></label>
                    <input type="text" id="accountName" name="accountName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入公众号名称" required>
                </div>
                <div>
                    <label for="accountId" class="block text-sm font-medium text-gray-700 mb-1">账号ID <span class="text-red-500">*</span></label>
                    <input type="text" id="accountId" name="accountId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="例如：gh_123456789012" required>
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">联系邮箱</label>
                    <input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入联系邮箱">
                </div>
                <div>
                    <label for="authorizerAppid" class="block text-sm font-medium text-gray-700 mb-1">授权方AppID</label>
                    <input type="text" id="authorizerAppid" name="authorizerAppid" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入授权方AppID">
                </div>
            </div>
            
            <div>
                <label for="description" class="block text-sm font-medium text-gray-700 mb-1">账号描述</label>
                <textarea id="description" name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入账号描述"></textarea>
            </div>
            
            <div class="bg-blue-50 p-4 rounded-md">
                <h4 class="font-medium text-blue-800 mb-2 flex items-center">
                    <i class="fa fa-info-circle mr-2"></i> 授权说明
                </h4>
                <ul class="text-sm text-blue-700 space-y-2">
                    <li class="flex items-start">
                        <i class="fa fa-check-circle mt-0.5 mr-2"></i>
                        <span>添加账号后需要完成公众号授权才能正常使用</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check-circle mt-0.5 mr-2"></i>
                        <span>请确保您拥有该公众号的管理员权限</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check-circle mt-0.5 mr-2"></i>
                        <span>授权有效期为1年，请及时更新授权</span>
                    </li>
                </ul>
            </div>
            
            <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
                <button type="button" id="cancelAddAccountBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    取消
                </button>
                <button type="submit" class="bg-primary text-white px-6 py-2 rounded-md hover:bg-primary/90 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    确认添加
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // 添加账号弹窗相关功能
    document.addEventListener('DOMContentLoaded', function() {
        const addAccountModal = document.getElementById('addAccountModal');
        const addAccountBtn = document.getElementById('addAccountBtn');
        const closeAddAccountModalBtn = document.getElementById('closeAddAccountModalBtn');
        const cancelAddAccountBtn = document.getElementById('cancelAddAccountBtn');
        const addAccountForm = document.getElementById('addAccountForm');
        
        // 显示添加账号弹窗
        addAccountBtn?.addEventListener('click', function() {
            if (addAccountModal) {
                addAccountModal.classList.remove('hidden');
            }
        });
        
        // 关闭添加账号弹窗
        function closeAddAccountModal() {
            if (addAccountModal) {
                addAccountModal.classList.add('hidden');
            }
        }
        
        // 点击关闭按钮
        closeAddAccountModalBtn?.addEventListener('click', closeAddAccountModal);
        
        // 点击取消按钮
        cancelAddAccountBtn?.addEventListener('click', closeAddAccountModal);
        
        // 点击弹窗外部关闭弹窗
        addAccountModal?.addEventListener('click', function(e) {
            if (e.target === this) {
                closeAddAccountModal();
            }
        });
        
        // 添加账号表单提交
        addAccountForm?.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 收集表单数据
            const accountName = document.getElementById('accountName').value;
            const accountId = document.getElementById('accountId').value;
            const email = document.getElementById('email').value;
            const description = document.getElementById('description').value;
            
            // 简单验证
            if (!accountName || !accountId) {
                alert('账号名称和账号ID不能为空');
                return;
            }
            
            const submitBtn = this.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 提交中...';
            
            // 模拟提交成功
            setTimeout(() => {
                submitBtn.disabled = false;
                submitBtn.innerHTML = '确认添加';
                
                // 关闭弹窗
                closeAddAccountModal();
                
                // 显示成功提示
                alert('账号添加成功！');
                
                // 这里可以添加刷新账号列表的逻辑
            }, 1000);
        });
    });
</script>